// 实现标绘面板中的功能
import * as olProj from 'ol/proj' // 坐标变换使用
import { Fill, Stroke, Circle as CircleStyle, Style, Text } from 'ol/style'
// 为了添加边界线新加入的
import axios from 'axios'
import Polygon from 'ol/geom/Polygon'
import Feature from 'ol/Feature'
// import { updatePlotFile } from '@/api/drawing.js'
import { defineComponent, getCurrentInstance } from "vue";

let proxy

export default defineComponent(
  {
    data() {
      return {
        showPanel: false, // 标绘面板的显示隐藏功能（面板的显示隐藏）
        svgPlot: false, // 工具面板中，svg变换输入框显示位,[***]部分的显示和隐藏
        svgBase: false, // 工具面板中，svg样式参数显示位; 基本军标样式(颜色和边框等)
        showCtrl: true, // 军标的ID，颜色，旋转平移等部分的内容
        showBase: false // 显示隐藏工具板中的基本参数
      }
    },
    created () {
      proxy = getCurrentInstance().proxy;
    },
    methods: {

      // /**
      //  * @description 休眠-sleep
      //  * @param ms {number}休眠时间，单位是毫秒
      //  * @return
      //  */
      // sleep (ms) {
      //   return new Promise(resolve => setTimeout(resolve, ms))
      // },

      /** 使用openPlotPanel和closePlotPanel替代此方法
       * @description 设置标绘面板是否显示：参数isDSP：ture，false （isDisplay）
       * @param iSHow {Boolean} 设置是否显示工具面板（true显示，false隐藏）
       * @return
       */
      showPlotPanel(iSHow = true) {
        proxy.showPanel = iSHow
      },

      // 功能同上（忽略）
      // onShowPanel () {
      //   proxy.showPanel = proxy.showPanel ? false : true
      // },

      /**
       * @description 工具面板打开显示-打开工具箱
       * @param null
       * @return
       */
      openPlotPanel() {
        proxy.showPanel = true
      },

      /**
       * @description 工具面板关闭隐藏-关闭工具箱
       * @param null
       * @return
       */
      closePlotPanel() {
        proxy.showPanel = false
      },

      /**
       * @description 设置单位尺寸（军标在地图上默认大小1000米*2）
       * @param width {Number} 设置军标单位宽度（米）
       * @param height {Number} 设置军标单位高度（米）
       * @return
       */
      setUnit(width, height) {
        proxy.$refs.pVec.setUnit(width, height)
      },

      // 获取单位尺寸（军标在地图上默认大小1000米*2）
      /**
       * @description 获取单位尺寸（军标在地图上默认大小1000米*2）
       * @param null
       * @return 返回标绘的单位尺寸
       */
      getUnit() {
        return proxy.$refs.pVec.getUnit()
      },

      /**
       * @description 设置描边的缺省宽度
       * @param width {Number} 标绘的宽度
       * @return
       */
      setStrokeWidth(width) {
        proxy.strokeWidth = parseInt(width)
      },

      /**
       * @description 获取描边的缺省宽度
       * @param null
       * @return 标绘的线宽
       */
      getStrokeWidth() {
        return proxy.strokeWidth
      },

      /**
       * @description 获取绘制军标的基本属性unit和stroke等
       * @param null
       * @return 标绘的线宽
       */
      loadBase() {
        const iUnit = proxy.getUnit() // setUnit(width, height)
        // -let iStroke = proxy.getStrokeWidth() // setStrokeWidth (width)
        // 显示内容
        // console.log(iStroke)
        document.getElementById('baseunit').value = iUnit[0]
        document.getElementById('basestroke').value = proxy.strokeWidth
      },

      /**
       * @description 设置军标的基本属性unit和stroke等
       * @param null
       * @return 标绘的线宽
       */
      saveBase() {
        const iUnit = document.getElementById('baseunit').value
        const iStroke = document.getElementById('basestroke').value
        // 暂时忽略数据校验
        if (iUnit) {
          proxy.setUnit(iUnit, iUnit)
        }
        if (iStroke) {
          proxy.setStrokeWidth(iStroke)
        }
        // 调用保存修改标绘文件接口
        // updatePlotFile({ plot_id: proxy.plotFileID, unit: proxy.getUnit(), stroke_width: proxy.strokeWidth, modifier: proxy.iUser }).then(res => {
        //   console.log(res.data)
        // })
      },

      /**
       * 更新标绘文件信息到数据库
       * @param {object} fileInfos 修改的标绘文件配置信息对象-指南针，图例，标题等
       */
      updatePlotFile2DB(fileInfos) {
        console.log(fileInfos)
        // updatePlotFile(fileInfos).then(res => { 'ok' })
      },

      /**
       * 添加边界信息(待优化)
       */
      addZone(strAreaName) {
        let mapZone
        // 获取地图数据
        // axios.get('/mapres/maps/json/' + strAreaName + '.json').then((res) => {
        axios.get('/mapres/maps/sub/' + strAreaName + '.json').then((res) => {
          mapZone = res.data
          if (!mapZone) return
          console.log(mapZone)
          if (mapZone.type === 'FeatureCollection') {
            const zoneArry = mapZone.features
            // console.log(zoneArry)
            for (let i = 0; i < zoneArry.length; i++) {
              const zoneX = zoneArry[i]
              if (zoneX.geometry.type === 'MultiPolygon') {
                const coordArray = zoneX.geometry.coordinates
                const coordProp = zoneX.properties
                // console.log(coordProp)
                for (let l = 0; l < coordArray.length; l++) {
                  // 边界属性信息
                  let xCode = coordProp.adcode
                  if (!xCode) {
                    xCode = String(new Date().getTime())
                  }
                  const xName = coordProp.name
                  console.log(xCode, xName)
                  // 创建一个多边形
                  // 获取多边形顶点信息
                  const zoneCoord = coordArray[l]
                  console.log(l, zoneCoord)
                  const geometry = new Polygon(zoneCoord)
                  geometry.transform('EPSG:4326', 'EPSG:3857')
                  // console.log(geometry)
                  const iFeature = new Feature(geometry) // 生成feature
                  // iFeature.set('gid', 'Star_' + String(new Date().getTime()))
                  iFeature.set('gid', 'Star_' + xCode)
                  iFeature.set('type', 'PLOT')
                  iFeature.set('mark', strAreaName)
                  iFeature.setStyle(new Style({
                    fill: new Fill({ // ol.style.Fill
                      color: 'rgba(255,0,0,0)'
                    }),
                    stroke: new Stroke({ // ol.style.Stroke
                      color: proxy.currColor,
                      width: proxy.strokeWidth
                    })
                  }))
                  proxy.plottingLayer.getSource().addFeature(iFeature)

                  // 将每个数组生成一个多边形
                  const zonePoly = {}
                  zonePoly.id = 'Star_' + xCode
                  zonePoly.name = 'Polygon' // 类型为多边形 还是iType？
                  zonePoly.mark = strAreaName
                  zonePoly.cp = geometry.getCoordinates() // ctrlpoint控制点，包含中心点
                  zonePoly.scale = 1
                  zonePoly.rotate = 0
                  zonePoly.color = proxy.currColor // 颜色（样式需要更详细些，可能还会有虚线！）
                  zonePoly.unit = null // proxy.currPlot.unit = null // 基础多边形不需要次属性
                  zonePoly.attach = null // proxy.currPlot.attach = null // 关联文字数组！
                  zonePoly.boxWH = null // proxy.currPlot.boxWH = null // polygon不需要此数据
                  zonePoly.style = {
                    fill: 'rgba(255,0,0,0)', // Fill,
                    stroke: proxy.currColor, // Stroke,
                    width: proxy.strokeWidth // Width
                  }
                  // const dCache = JSON.parse(JSON.stringify(zonePoly))
                  proxy.xData.push(zonePoly)
                }
              }
            }
          } else if (mapZone.type === 'GeometryCollection') {
            const zoneArry = mapZone.geometries
            for (let i = 0; i < zoneArry.length; i++) {
              const zoneX = zoneArry[i]
              if (zoneX.type === 'Polygon') {
                // const coordArray = zoneX.coordinates
                const zoneCoord = zoneX.coordinates // 范围多边形坐标
                console.log(zoneCoord)
                const xCode = String(new Date().getTime())
                const geometry = new Polygon(zoneCoord)
                geometry.transform('EPSG:4326', 'EPSG:3857')
                const iFeature = new Feature(geometry) // 生成feature
                iFeature.set('gid', 'Star_' + xCode)
                iFeature.set('type', 'PLOT')
                iFeature.set('mark', strAreaName)
                iFeature.setStyle(new Style({
                  fill: new Fill({ // ol.style.Fill
                    color: 'rgba(255,0,0,0)'
                  }),
                  stroke: new Stroke({ // ol.style.Stroke
                    color: proxy.currColor,
                    width: proxy.strokeWidth
                  })
                }))
                proxy.plottingLayer.getSource().addFeature(iFeature) // 添加绘制的范围poly到标绘层
                // 将每个数组生成一个多边形
                const zonePoly = {}
                zonePoly.id = 'Star_' + xCode
                zonePoly.name = 'Polygon' // 类型为多边形 还是iType？
                zonePoly.mark = strAreaName
                zonePoly.cp = geometry.getCoordinates() // ctrlpoint控制点，包含中心点
                zonePoly.scale = 1
                zonePoly.rotate = 0
                zonePoly.color = proxy.currColor // 颜色（样式需要更详细些，可能还会有虚线！）
                zonePoly.unit = null // proxy.currPlot.unit = null // 基础多边形不需要次属性
                zonePoly.attach = null // proxy.currPlot.attach = null // 关联文字数组！
                zonePoly.boxWH = null // proxy.currPlot.boxWH = null // polygon不需要此数据
                zonePoly.style = {
                  fill: 'rgba(255,0,0,0)', // Fill,
                  stroke: proxy.currColor, // Stroke,
                  width: proxy.strokeWidth // Width
                }
                // const dCache = JSON.parse(JSON.stringify(zonePoly))
                proxy.xData.push(zonePoly)
              }
            }
          }
        })
      },
      /**
       * 删除边界信息
       */
      delZone(strAreaName) {
        for (let i = proxy.xData.length - 1; i > 0; i--) {
          const iPlot = proxy.xData[i]
          const mark = iPlot.mark
          if (mark === strAreaName) {
            proxy.xData.splice(i, 1)
          }
        }
        // 删除显示在标绘层上的范围
        const iFeatures = proxy.plottingLayer.getSource().getFeatures()
        console.log(iFeatures)
        if (!iFeatures) return
        // const plotSource = proxy.plottingLayer.getSource()
        for (let i = 0; i < iFeatures.length; i++) {
          const featrue = iFeatures[i]
          const mark = featrue.get('mark')
          if (mark === strAreaName) {
            // plotSource.removeFeature(featrue)
            proxy.plottingLayer.getSource().removeFeature(featrue)
          }
        }
      },
      /**
       * @description 显示区域边界（标绘时可能需要绘制区域边界）
       * @param null
       * @return
       */
      displayArea() {
        const areaName = document.getElementById('areaname').value
        // proxy.$parent.areaDisplay(areaName)
        proxy.addZone(areaName)
      },

      /**
       * @description 清除边界线，当不在需要边界线时，清除边界线
       * @param null
       * @return
       */
      clearArea() {
        // proxy.$parent.areaDisplay('china')
        const areaName = document.getElementById('areaname').value
        proxy.delZone(areaName)
      },

      /**
       * @description 设置标绘面板样式（哪些项显示，哪些隐藏）
       * @param selPlot {String} 选择的军标名
       * @return
       */
      setPanel(selPlot) {
        let iType = selPlot.substr(0, 4)
        iType = iType.toLowerCase()
        if (!selPlot) {
          proxy.svgBase = false
          proxy.svgBase = false
          return
        }
        if (iType === 'icon' || iType === 'dire' || iType === 'mult' || iType === 'hand') {
          proxy.svgBase = false
        } else {
          proxy.svgBase = true
        }
      },

      /**
       * @description 显示隐藏工具面板中的内容(Panel):军标ID，颜色，位置，旋转，缩放等
       * @param null
       * @return
       */
      onShowTabs() {
        proxy.showCtrl = !proxy.showCtrl
        // proxy.showCtrl = proxy.showCtrl ? !proxy.showCtrl : !proxy.showCtrl
      },

      /**
       * @description 显示隐藏基本参数（单位长度和线宽 unit， stroke）
       * @param null
       * @return
       */
      onShowBase() {
        proxy.showBase = proxy.showBase ? !proxy.showBase : !proxy.showBase
      },

      /**
       * @description 军标面板确定按钮
       * @param null
       * @return
       */
      okPlot() {
        const plotID = document.getElementById('plotid').value
        if (plotID) {
          // 根据军标ID找到要修改的军标数据（proxy.currplot?）
          proxy.alterPlot = JSON.parse(JSON.stringify(proxy.currPlot))
          // 将修改的数据写入到currplot中
          let iType = plotID.substr(0, 4)
          iType = iType.toLowerCase()
          if (iType === 'text') {
            const iSize = document.getElementById('plotsize').value
            // let iFont = document.getElementById('plotweight').value + ' ' + document.getElementById('plotsize').value + ' ' + document.getElementById('plotfont').value
            const iFont = document.getElementById('plotweight').value + ' ' + iSize + ' ' + document.getElementById('plotfont').value
            const iText = document.getElementById('plottxt').value
            const iFill = document.getElementById('plotfill').value
            const iStroke = document.getElementById('plotstroke').value
            const iWidth = document.getElementById('plotwidth').value
            // 处理文本中的特殊字符-转义(在保存那里统一处理)
            // iText = iText.replace(/\n/g, '\\\\n')
            // Fill填充色或文字颜色； Stroke边色； Width边框； LineDash虚线样式； TEXT文本内容； Font字体样式
            // proxy.setCurrPlotStyle(iFill, iStroke, iWidth, null, iText, iFont)
            proxy.currPlot.style.fill = iFill
            proxy.currPlot.style.stroke = iStroke
            proxy.currPlot.style.width = iWidth
            proxy.currPlot.style.text = iText
            proxy.currPlot.style.font = iFont

            // 需要生成第二控制点；
            // 返回{cp:[basePnt, cp2], boxWH:{w:w, h:h}}
            const cp2WH = proxy.getTxtCPntAndWH(proxy.currPlot.cp[0], iSize, iText)
            proxy.currPlot.cp = cp2WH.cp
            proxy.currPlot.boxWH = cp2WH.boxWH
            // 删除xData中对应的元素
            // 将修改的元素添加到xData中
            const objPlot = JSON.parse(JSON.stringify(proxy.currPlot))
            proxy.updatePlot(plotID, objPlot)
            // proxy.plotRecordUpdate(objPlot, 'U') // new 协同记录操作记录 -最后一期添加
            // -- 删除text特有的boxWH
            // 创建新的style，设置给军标层中对应的军标
            const newStyle = new Style({
              text: new Text({
                // 位置
                textAlign: 'left', // 'left', 'right', 'center', 'end' or 'start'.
                // 基准线
                textBaseline: 'middle', // 'bottom', 'top', 'middle', 'alphabetic', 'hanging', 'ideographic'.
                // 文字样式
                font: iFont, // 默认格式 'normal 14px 微软雅黑',
                // 文本内容
                text: iText,
                // scale: iData[1][0],  // 文字数据信息[[点的地理坐标x， y]，[文字的缩放*，文字的旋转]]
                // 文本填充样式（即文字颜色）
                fill: new Fill({ color: iFill })
                // stroke: new Stroke({ color: iStroke, width: iWidth })
              })
            })
            const iFeatures = proxy.plottingLayer.getSource().getFeatures()
            let idx = -1
            for (let i = 0; i < iFeatures.length; i++) {
              if (iFeatures[i].get('gid') === plotID) {
                console.log(iFeatures[i])
                idx = i
                break
              }
            }
            // console.log(idx,iFeatures)
            iFeatures[idx].setStyle(newStyle)
            // 处理基本图形数据
          } else if (iType === 'line' || iType === 'squa' || iType === 'rect' || iType === 'star' || iType === 'circ' || iType === 'info' || iType === 'flag' || iType === 'tria' || iType === 'unio' || iType === 'rang') {
            // 如果样式有变更 1修改样式 2修改xData对应的数据
            const iFill = document.getElementById('plotfill').value
            const iStroke = document.getElementById('plotstroke').value
            const iWidth = document.getElementById('plotwidth').value
            let iDline = document.getElementById('plotdline').value
            if (iDline) {
              iDline = iDline.split(',') // 注意，数组元素必须是数字
            } else {
              iDline = null
            }

            // 设置新样式
            const newStyle = new Style({
              fill: new Fill({ // ol.style.Fill
                color: iFill
              }),
              stroke: new Stroke({ // ol.style.Stroke
                color: iStroke,
                width: iWidth,
                lineDash: iDline
              })
            })
            const iFeatures = proxy.plottingLayer.getSource().getFeatures()
            let idx = -1
            for (let i = 0; i < iFeatures.length; i++) {
              if (iFeatures[i].get('gid') === plotID) {
                idx = i
                // break
                iFeatures[idx].setStyle(newStyle)
              }
            }
            // 设置基本军标样式
            // iFeatures[idx].setStyle(newStyle)
            // 向xData中更新,和处理txt不同。  注意，plotid中有alt——有问题
            // plotID, Fill = null,Stroke = null, Width = 0, LineDash = null, TEXT = null, Font = null
            proxy.setxDataPlotStyle(plotID, iFill, iStroke, iWidth, iDline, null, null)
          }
          // 新添加的弹出气泡信息
          proxy.$refs.iPopInfo.updatePlotPop(plotID, proxy.xData) // 后面统一更新
          proxy.$refs.iPopInfo.clearPopInfos()
          // 删除控制点
          proxy.clearCtrlPoint()
          // new 协同--更新后记录到步骤数组确定后，
          let strPlotID = plotID.substr(0, 4)
          if (strPlotID.toLowerCase() === 'alt_') {
            strPlotID = plotID.substr(4)
          } else {
            strPlotID = plotID
          }
          const plotElement = proxy.getPlotFromXData(strPlotID)
          // proxy.xData[idx]['TS'] = new Date().getTime()
          plotElement.TS = new Date().getTime()
          proxy.plotRecordUpdate(plotElement, 'U') // new 协同记录操作记录 -最后一期添加
        }
      },

      /**
       * @description 军标数据展示修改 Panel;(先根据军标ID获取军标数据，当选中军标时--cardMap变更iSelPlotID--显示获取军标数据)，在面板中显示数据
       * @param plotID {String} 军标的ID,
       * @param sSCS {String} 当前军标的坐标系（数据坐标）
       * @return
       */
      getPlotDataByID(plotID, sSRS) {
        if (plotID) {
          if (!proxy.currPlot.id || proxy.currPlot.id === null || proxy.currPlot.id !== plotID) {
            // console.log('需要调用plot军标')
            proxy.xData2currPlotByID(plotID) // 从xData数组中获取指定id的军标数据
          }
          // 军标数据的坐标，虽是数据坐标，但是是在map中的，所以就是地图坐标系RCS
          const sRCS = sSRS || proxy.$parent.conf.RCS
          // if (proxy.currPlot.name === '') return // 数据为空时退出
          // 向军标Panel填充数据
          const plotid = proxy.currPlot.id
          if (!plotid) return
          let iType = plotid.substr(0, 4)
          iType = iType.toLowerCase()
          // let cp = proxy.iMap.getPixelFromCoordinate(proxy.currPlot.cp[0]) // 控制点1：中心点
          // const cp = olProj.transform(proxy.currPlot.cp[0], sRCS, 'EPSG:4326') // 将数据坐标转换成EPSG4326(显示经纬度)
          let cp
          if (proxy.currPlot.name === 'Polygon') {
            cp = olProj.transform(proxy.currPlot.cp[0][0], sRCS, 'EPSG:4326')
          } else {
            cp = olProj.transform(proxy.currPlot.cp[0], sRCS, 'EPSG:4326')
          }
          let fontParmArr = null
          switch (iType) {
            case 'icon':
            case 'dire':
            case 'ddir':
            case 'mult':
              document.getElementById('plotid').value = plotID
              document.getElementById('plotcolor').value = proxy.currPlot.color
              document.getElementById('plotlon').value = cp[0]
              document.getElementById('plotlat').value = cp[1]
              document.getElementById('plotrotate').value = proxy.currPlot.rotate
              document.getElementById('plotscale').value = proxy.currPlot.scale
              break
            case 'line':
            case 'squa':
            case 'rect':
            case 'star':
            case 'circ':
            case 'unio':
            case 'rang':
            case 'info':
            case 'flag':
            case 'tria':
              document.getElementById('plotid').value = plotID
              document.getElementById('plotcolor').value = proxy.currPlot.color
              document.getElementById('plotfill').value = proxy.currPlot.style.fill
              document.getElementById('plotstroke').value = proxy.currPlot.style.stroke
              document.getElementById('plotwidth').value = proxy.currPlot.style.width
              document.getElementById('plotdline').value = proxy.currPlot.style.lineDash
              break
            case 'text':
              document.getElementById('plotid').value = plotID
              document.getElementById('plotfill').value = proxy.currPlot.style.fill
              document.getElementById('plotstroke').value = proxy.currPlot.style.stroke
              document.getElementById('plotwidth').value = proxy.currPlot.style.width
              document.getElementById('plottxt').value = proxy.currPlot.style.text
              fontParmArr = proxy.currPlot.style.font.split(' ')
              document.getElementById('plotfont').value = fontParmArr[2]
              document.getElementById('plotsize').value = fontParmArr[1]
              document.getElementById('plotweight').value = fontParmArr[0]
              // console.log(fontParmArr)
              break
          }
          // 新添加的弹出气泡信息
          proxy.$refs.iPopInfo.clearPopInfos()
          if (proxy.currPlot.pop) {
            // setPopInfos (oPopInfos)  参数为设置提示内容json plotPop.vue中
            proxy.$refs.iPopInfo.setPopInfos(proxy.currPlot.pop)
          }
        } else {
          document.getElementById('plotid').value = ''
          document.getElementById('plotcolor').value = ''
          document.getElementById('plotlon').value = ''
          document.getElementById('plotlat').value = ''
          document.getElementById('plotrotate').value = ''
          document.getElementById('plotscale').value = ''
          // BASE
          document.getElementById('plotfill').value = ''
          document.getElementById('plotstroke').value = ''
          document.getElementById('plotwidth').value = ''
          document.getElementById('plotdline').value = ''
          // text
          document.getElementById('plottxt').value = ''
          document.getElementById('plotfont').value = ''
          document.getElementById('plotsize').value = ''
          document.getElementById('plotweight').value = ''
          // 新添加的弹出气泡信息
          proxy.$refs.iPopInfo.clearPopInfos()
        }
      },

      /**
       * @description 插入气泡提示信息
       * @param sPlotID {String} 军标的ID,
       * @param oPopInfos {Object} 军标提示气泡信息
       * @return null
       */
      addPlotPop(sPlotID, oPopInfos) {
        // 方法在plotPop.vue中updatePlotPop (sPlotID, aPlotData, oPopInfos = null) 参数：军标ID；保存每个军标数据的数组；军标提示信息对象
        // console.log(oPopInfos)
        if (oPopInfos) {
          proxy.$refs.iPopInfo.updatePlotPop(sPlotID, proxy.xData, oPopInfos)
          const plotElement = proxy.getPlotFromXData(sPlotID)
          // console.log(plotElement)
          plotElement.TS = new Date().getTime()
          proxy.plotRecordUpdate(plotElement, 'U')
        }
      }

      // 当前方法
    }
  }
)
